<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml"
    xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
    xmlns:h="http://xmlns.jcp.org/jsf/html"
    xmlns:c="http://xmlns.jcp.org/jsp/jstl/core"
    xmlns:fn="http://java.sun.com/jsp/jstl/functions">

    <ui:composition template="/WEB-INF/content/layout.xhtml">
        <ui:define name="title">${msg['menu.server.maps']}</ui:define>
        <ui:define name="content">
<script>
    var x = document.getElementById("msg");
    var y = document.getElementById("map");
	function getLocation() {
		if (navigator.geolocation) {
			navigator.geolocation.getCurrentPosition(showPosition, showError);
		} else {
			x.innerHTML = "Geolocation is not supported by this browser.";
		}
	}
	function showPosition(position) {
		var c = position.coords;
		x.innerHTML = "Latitude: " + c.latitude
				+ "<br/>Longitude: " + c.longitude
				+ "<br/>Accuracy: " + c.accuracy
				+ "<br/>Altitude: " + c.altitude
				+ "<br/>AltitudeAccuracy: " + c.altitudeAccuracy
				+ "<br/>Heading: " + c.heading
				+ "<br/>Speed: " + c.speed
				+ "<br/>Timestamp: " + position.timestamp;
        y.src = "https://maps.google.com/maps?q=" + c.latitude + ","
				+ c.longitude + "&amp;z=12&amp;output=embed";
	}
	function showError(error) {
		switch (error.code) {
		case error.PERMISSION_DENIED:
			x.innerHTML = "User denied the request for Geolocation."
			break;
		case error.POSITION_UNAVAILABLE:
			x.innerHTML = "Location information is unavailable."
			break;
		case error.TIMEOUT:
			x.innerHTML = "The request to get user location timed out."
			break;
		case error.UNKNOWN_ERROR:
			x.innerHTML = "An unknown error occurred."
			break;
		}
	}
</script>

<iframe id="map" src="https://maps.google.com/maps?q=${header['X-AppEngine-CityLatLong']}&amp;z=10&amp;output=embed" style="width: 18em; height: 18em;" />
<p id="msg">${msg['server.maps.location']}: ${header['X-AppEngine-CityLatLong']}</p>
<button data-inline="true" onclick="getLocation()">${msg['server.maps.update']}</button>

        </ui:define>
    </ui:composition>

</html>
